<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
			    padding: 0;
			    margin: 0;
			    box-sizing: border-box
			  }
			body {
			    height: 100vh;
			    padding: 1rem;
			  }
			.container {
			    width: 100%;
			    height: 100%;
			    display: grid;
			    /*行间距*/
			    grid-row-gap: 1rem;
			    /*列间距*/
			    grid-column-gap: 1rem;
			    /*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */
			    grid-template-columns: repeat(4, calc(25% - 1rem));
			    grid-template-rows: repeat(4, calc(25% - 1rem));
			    overflow: hidden;
			}
			.item {
			    background: #33a8a5;
			}
			.container .item:nth-child(1) {
				grid-area: 2 / 3 / 1 / 1;
			}
			.container .item:nth-child(3){
				grid-area: 1 / 4/ 3 / 4;
			}
			.container .item:nth-child(5){
				grid-area: 2 / 2/ 4 / 4;
				background: #0055ff;
			}
			.container .item:nth-child(7){
				grid-area: 4 / 1/ 4 / 3;
			}
			.container .item:nth-child(8){
				grid-area: 4 / 3/ 4 / 5;
			}
			.container .item:nth-child(1),.item:nth-child(7){
				background: #f88715;
			}
			.container .item:nth-child(2),.item:nth-child(8){
				background: #00aa00;
			}
			.container .item:nth-child(3),.item:nth-child(4){
				background: #aa00ff;
			}
			.container .item:nth-child(6),.item:nth-child(9){
				background: #0055ff;
			}
		</style>
	</head>
	<body>
		<div class="container">
		    <div class="item"></div>
		    <div class="item"></div>
		    <div class="item"></div>
			<div class="item"></div>
		
		    <div class="item"></div>
		    <div class="item"></div>
		    <div class="item"></div>
			<div class="item"></div>
		
		    <div class="item"></div>
		  </div>
	</body>
</html>